<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
ul,li{list-style:none}
#plist li{width:16.666%;height:320px; overflow:hidden; float:left; position:relative; }
#plist li .bg{width:100%; height:100%; opacity:0; background:#03F; transition:all 500ms; position:absolute; left:0; top:0; z-index:10;}
#plist li div{position:absolute; top:0px; left:0px;  width:100%; height:100%;}
#plist li p{margin:0 auto;}
#plist li p img{width:100%; height:320px;}
#plist li div span{display:block; transition:all 500ms;}
#plist li div span img{width:100%; height:100%;}
#plist li div i{width:40px; height:2px; background:white; margin:40px auto 0px auto; display:block; transition:all 500ms; }
#plist li div h2{font-size:20px; text-align:center; color:white; margin-top:40px; transition:all 500ms;}
#plist li div h3 {margin-top:30px; width:100%; transition:all 500ms;}
#plist li div h3 img{width:100%; height:100%;}
#plist li:hover .bg{opacity:0.6;}
#plist li:hover div span{margin-top:-20px}
#plist li:hover div i{margin-top:20px}
#plist li:hover div h2{margin-top:20px;}
#plist li:hover div h3{margin-top:20px;}

</style>
</head>

<body>
<ul id="plist">
<li>
<p><img src="picture/solution_li01.jpg" /></p>
<div class="bg"></div>
<div>
	<span><img src="picture/solution_li_ico01.png" /></span>
    <i></i>
    <h2>物联网专业</h2>
    <h3><img src="picture/solution_more_btn.png" /></h3>
</div>
</li>
<li>
<p><img src="picture/solution_li02.jpg" /></p>
<div class="bg"></div>
<div>
	<span><img src="picture/solution_li_ico02.png" /></span>
    <i></i>
    <h2>物联网专业</h2>
    <h3><img src="picture/solution_more_btn.png" /></h3>
</div>
</li>
<li>
<p><img src="picture/solution_li03.jpg" /></p>
<div class="bg"></div>
<div>
	<span><img src="picture/solution_li_ico03.png" /></span>
    <i></i>
    <h2>物联网专业</h2>
    <h3><img src="picture/solution_more_btn.png" /></h3>
</div>
</li>
<li>
<p><img src="picture/solution_li04.jpg" /></p>
<div class="bg"></div>
<div>
	<span><img src="picture/solution_li_ico04.png" /></span>
    <i></i>
    <h2>物联网专业</h2>
    <h3><img src="picture/solution_more_btn.png" /></h3>
</div>
</li>
<li>
<p><img src="picture/solution_li05.jpg" /></p>
<div class="bg"></div>
<div>
	<span><img src="picture/solution_li_ico05.png" /></span>
    <i></i>
    <h2>物联网专业</h2>
    <h3><img src="picture/solution_more_btn.png" /></h3>
</div>
</li>
<li>
<p><img src="picture/solution_li06.jpg" /></p>
<div class="bg"></div>
<div>
	<span><img src="picture/solution_li_ico06.png" /></span>
    <i></i>
    <h2>物联网专业</h2>
    <h3><img src="picture/solution_more_btn.png" /></h3>
</div>
</li>
</ul>
</body>
</html>
